/*
 * @Author: '1748780144@qq.com' '1748780144@qq.com'
 * @Date: 2022-10-07 20:52:37
 * @LastEditors: '1748780144@qq.com' '1748780144@qq.com'
 * @LastEditTime: 2022-10-18 09:51:14
 * @FilePath: \xiangmu\enlightenment_eems\src\pages\FranchiseeManagement\Settlement\index.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */


import React, { useState,useEffect } from 'react';
import { Table ,DatePicker,Form,Divider,Input,Button ,Space,Modal,message} from 'antd';
import { useNavigate} from 'react-router-dom';
// import order from '../../../store/feetom/Shuju'
import './mode.scss'
import { ExclamationCircleOutlined } from '@ant-design/icons';
import {observer} from 'mobx-react'
//引入国际化设置（中文）
import locale from 'antd/lib/date-picker/locale/zh_CN';

import store from '../../../store';


const {JiaMenggl}=store;

const { confirm } = Modal;
// const { RangePicker } = DatePicker;
const Settlement=()=>{
const ver=useNavigate()
const xiangqing=(a,b,c)=>{
  return ()=>{ 
    ver('/home/Particultext',{state:b})
  }
}
const columns = [
  
  {
    title: '加盟商名称',
    dataIndex: 'franchiseeName',
  },
  {
    title: '结算月份',
    dataIndex: 'settlementMonth',
    
  },
  {
    title: '销售金额',
    dataIndex: 'salesAmount',
  },
  {
    title: '佣金比例',
    dataIndex: 'commissionRate',
  },
  {
    title: '结算金额',
    dataIndex: 'settlementAmount',
  },
  {
    title: '结算状态',
    dataIndex: 'settlementStatus',
    sorter: {
  
    },
  }
  ,
  {
    title: '操作',
    dataIndex: '查看',
    render: (a,b,c) => <span style={{color:'blue',cursor:'pointer'}} onClick={xiangqing(a,b,c)}>查看</span>,
  }
];


useEffect(() => {
  console.log(JiaMenggl)
  if (JiaMenggl.JieZhangData.length === 0) {
    JiaMenggl.showAllFran()
  }
}, [])

const data = JiaMenggl.JieZhangData.map(item=>{
  item.key = item.id;
  return item
})
// commissionRate
// franchiseeName
// id
// postscript
// salesAmount
// settlementAmount
// settlementMonth
// settlementStatus


const [selectedRowKeys, setSelectedRowKeys] = useState([]);

const onSelectChange = (newSelectedRowKeys) => {
  console.log(newSelectedRowKeys);
  setSelectedRowKeys(newSelectedRowKeys);
};
const rowSelection = {
  selectedRowKeys,
  onChange: onSelectChange,
};
const success = () => {
  message.success('已结账成功！');
};
const NOtext = () => {
  message.success('已取消结账！');
};
const showConfirm = () => {
  confirm({
    title: '是否结算第*条数据',
    icon: <ExclamationCircleOutlined />,
    content: '结算后将无法更改 是否继续 ?',
    onOk() {
      console.log('OK');
      success();
    },
    onCancel() {
      console.log('Cancel');
      NOtext()
    },
    
  });
};

return (
  <div id='textHeard'>
     <Form>
     <Space size={"middle"}>
    <Form.Item
        label="结算月份"
        name="yuefen"
         > 
        <DatePicker locale={locale} picker="month" /> 
    </Form.Item>
    <Form.Item
      label="加盟商"
      name="sosd"
       > 
       <Input placeholder='加盟商' style={{width:100}}/>
       </Form.Item>
       </Space>
       <Button className='btn' style={{width:100,marginLeft:30}}>搜索</Button>
       </Form>
    <Divider />
    <Button className='btn' onClick={showConfirm}>结算</Button>
        <Button className='btn' >导出</Button>
        {/* 表格列名 */}
      <Table rowSelection={rowSelection} columns={columns} dataSource={data} pagination={{defaultPageSize:5}}/>
  </div>
);


}

export default observer(Settlement);